<template>
  <div class="catDetail-container">
    <el-descriptions :title="cat.name" :column="columnNum">
      <el-descriptions-item v-for="key in Object.keys(labels)" :label="(labels as any)[key] + '：'">
        {{ getValue(key) }}</el-descriptions-item
      >
    </el-descriptions>
  </div>
</template>

<script setup lang="ts">
import { ElDescriptions, ElDescriptionsItem, ElImage } from "element-plus";
import { parseTime } from "@/utils/tool";

const { cat, columnNum } = defineProps(["cat", "columnNum"]);

const labels = {
  brand: "品牌",
  saleUnit: "售出",
  chipCode: "芯片",
  variety: "品种",
  color: "花色",
  sex: "性别",
  brithday: "出生日期",
  hair: "长短毛",
  host: "猫主人",
  homeName: "猫舍",
  shelfNum: "货架号",
  petStatus: "宠物状态",
  grade: "等级",
  parent: "父母",
  generation: "第几代",
};

function getValue(key: string) {
  if (key === "brithday") {
    return parseTime(cat[key], "{y}-{m}-{d}");
  }

  if (key === "sex") {
    if (cat[key] === "1") {
      return "公";
    } else {
      return "母";
    }
  }
  if (key === "hair") {
    if (cat[key] === "1") {
      return "长";
    } else {
      return "短";
    }
  }
  if (key === "petStatus") {
    if (cat[key] === "1") {
      return "健康";
    } else {
      return "死亡";
    }
  }
  return cat[key];
}
</script>

<style scoped lang="scss"></style>
